<template>
    <Modal v-model:open="codeModalVisible" width="50%" :footer="null" @ok="handleCancelModal" @cancel="handleCancelModal">
        <svg class="copy-icon" @click="copyToClipboard" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3661" width="18" height="18">
        <path class="copy-hover" d="M678.758927 731.426377a51.930909 51.930909 0 0 0 52.66233-51.930909V51.936029A51.930909 51.930909 0 0 0 678.758927 0.00512H51.930909A51.930909 51.930909 0 0 0 0 51.936029v627.559439a51.930909 51.930909 0 0 0 51.930909 51.930909h626.828018z" p-id="3662" fill="#babebe"></path><path d="M971.32743 292.573623H804.563383v454.212601a57.782279 57.782279 0 0 1-57.782279 57.782279H292.568503v167.495468a51.930909 51.930909 0 0 0 52.66233 51.930909h626.828018a51.930909 51.930909 0 0 0 51.930909-51.930909V344.504532a51.930909 51.930909 0 0 0-52.66233-51.930909z" p-id="3663" fill="#babebe"></path></svg>
        <Tabs type="card" v-model:activeKey="activeKey">
            <TabPane key="1" tab="Java" class="custom-tab-pane">
                <pre>
                    <code>{{ step.javaSeleniumSource }}</code>
                </pre>
            </TabPane>
            <!-- <TabPane key="2" tab="Python" class="custom-tab-pane">
                <pre>
                    <code>{{ step.pythonSeleniumSource }}</code>
                </pre>
            </TabPane> -->
            <TabPane key="3" tab="PythonPytest" class="custom-tab-pane">
                <pre>
                    <code>{{ step.pythonPytestSource }}</code>
                </pre>
            </TabPane>
        </Tabs>
    </Modal>
</template>

<script setup lang="ts">
import { Modal, Tabs, TabPane, message  } from 'ant-design-vue'
import useClipboard from 'vue-clipboard3';

const props = defineProps({
    step: {
        type: String,
        default: ''
    }
})
const codeModalVisible = defineModel<T[]>('codeModalVisible', { required: true })
const activeKey = ref('1')
//一键复制
const { toClipboard } = useClipboard();

const handleCancelModal = () => {
    codeModalVisible.value = false
}

onMounted(() => {
    console.log(codeModalVisible.value)
})
const copyToClipboard = async() => {
    const item = activeKey.value === '1'? props.step.javaSeleniumSource : activeKey.value === '2'? props.step.pythonSeleniumSource : props.step.pythonPytestSource;
    try {
        await toClipboard(item);
        message .success('复制成功');
      } catch (e) {
        message.error('复制失败');
      }

}

</script>

<style scoped>
code{
    position: relative;
}

.copy-icon{
    position: absolute;
    right:40px; 
    top: 90px;
    z-index: 9;
    cursor: pointer;

}
svg:hover  {
      color: red !important;
    }
</style>